<!-- 展示投票细节以及投票界面 -->
<template>
  <div class="main">

    <el-dialog
      :title="selectedOptionName"
      :visible.sync="isShowVoteDialog"
      width="30%"
    >
      <div class="vote-dialog">
        <img
          :src="this.selectedOption.image"
          class="image"
        />
        <!-- <el-input
          placeholder="请输入公钥"
          v-model="publicKey"
        /> -->
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="isShowVoteDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="confirmVote"
        >确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="发布进度"
      :visible.sync="isShowProgressDialog"
      width="30%"
    >
      <div>发布进度 {{ info }}</div>
      <el-progress
        class="progress"
        type="dashboard"
        :percentage="percentage"
      />
    </el-dialog>

    <div class="header">
      <div class="title">{{ title }}</div>
      <div>
        <el-button
          v-show="!address"
          @click="publish"
        >发布合约</el-button>
        <el-button
          v-show="canUpdate"
          @click="toUpdate"
        >修改信息</el-button>
      </div>
    </div>
    <div class="content">
      <div
        class="description"
        :class="isShowAllDescription ? 'display-section-description': ''"
      >{{ description }}</div>
      <div
        v-show="isShowAllDescription"
        class="load-details"
        @click="changeLoadDetails"
      ><i class="el-icon-caret-bottom"></i>详情</div>
      <div
        v-show="!isShowAllDescription"
        class="load-details"
        @click="changeLoadDetails"
      ><i class="el-icon-caret-top"></i>收起</div>
    </div>
    <h4> 选项 </h4>
    <div class="cards">
      <option-item
        v-for="(item, index) in option"
        :key="index"
        :id="item.optionId"
        :name="item.name"
        :image="item.image"
        :description="item.description"
        :selectedId="selectedId"
        @changeSelectedId="changeSelectedId"
      ></option-item>
    </div>
    <div v-show="user">
      <h4>选民</h4>
      <div class="user-table">
        <el-table
          :data="user"
          border
        >
          <el-table-column
            prop="userId"
            label="用户 id"
          >
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户账号"
          >
          </el-table-column>
          <!-- <el-table-column
            prop="hashcode"
            label="用户密钥"
          >
          </el-table-column> -->
        </el-table>
      </div>
    </div>
    <div
      class="bottom"
      v-show="address"
    >
      <el-button @click="vote">投票</el-button>
    </div>
  </div>
</template>

<script>
import OptionItem from "@/components/OptionItem/index.vue";

export default {
  components: {
    OptionItem,
  },
  data() {
    return {
      isShowAllDescription: true,
      selectedId: 0,
      isShowVoteDialog: false,
      isShowProgressDialog: false,
      publicKey: "",
      id: 0,
      title: "",
      image: "",
      description: "",
      hashcode: "",
      option: [],
      user: [],
      canUpdate: false,
      address: "",
      percentage: 0,
      info: "",
      colors: [
        { color: "#c1e4e9", percentage: 20 },
        { color: "#bce2e8", percentage: 40 },
        { color: "#a2d7dd", percentage: 60 },
        { color: "#abced8", percentage: 80 },
        { color: "#a0d8ef", percentage: 100 },
      ],
    };
  },
  methods: {
    changeLoadDetails() {
      this.isShowAllDescription = !this.isShowAllDescription;
    },
    changeSelectedId(e) {
      this.selectedId = e;
    },
    vote() {
      console.log(this.selectedOption);
      if (this.selectedId == 0 || !this.selectedOption) {
        this.$message.error("请选择选项");
        return;
      }

      this.isShowVoteDialog = true;
    },
    publish() {
      this.hashcode = crypto.randomUUID();
      this.isShowProgressDialog = true;
      this.percentage = 0;
      this.info = "开始发布";
      this.createSseConnect(this.hashcode);
      this.$store
        .dispatch("vote/publish", { id: this.id, hashcode: this.hashcode })
        .then((res) => {
          // this.isShowProgressDialog = false;
          this.getVoteInfo();
        })
        .catch(() => {});
    },

    toUpdate() {
      this.$router.push({
        path: "/publish/publish",
        query: {
          id: this.id,
        },
      });
    },

    getVoteInfo() {
      this.$store
        .dispatch("vote/info", { id: this.id })
        .then((res) => {
          this.title = res.title;
          this.image = res.image;
          this.description = res.description;
          this.option = res.options;
          this.user = res.users;
          this.canUpdate = res.canUpdate;
          this.address = res.address;
        })
        .catch(() => {});
    },
    confirmVote() {
      this.$store
        .dispatch("vote/vote", {
          voteId: this.id,
          optionId: this.selectedId
        })
        .then((res) => {
          this.$message({
            message: "投票成功",
            type: "success",
          });

          this.publicKey = "";
          this.isShowVoteDialog = false;
        })
        .catch(() => {
          this.$message.error("投票失败");
        });
    },

    createSseConnect(hashcode) {
      if (window.EventSource) {
        const eventSource = new EventSource(
          process.env.VUE_APP_BASE_API + "/sse/createSseConnect?id=" + hashcode
        );

        eventSource.onmessage = (event) => {
          if (!event.data) {
            return;
          }

          let obj = JSON.parse(event.data);

          this.info = obj.info;
          this.percentage = obj.progress;
        };

        eventSource.onopen = (event) => {};
        eventSource.onerror = (event) => {};
        eventSource.close = (event) => {};
      } else {
        console.log("浏览器不支持SSE");
      }
    },
  },
  computed: {
    selectedOption: {
      get() {
        let temp = this.option.filter((v) => v.optionId === this.selectedId)[0];
        return temp ? temp : "";
      },
    },
    selectedOptionName: {
      get() {
        return "确定投票给 " + this.selectedOption.name;
      },
    },
  },
  created() {
    this.id = this.$route.query.id;
    this.getVoteInfo();
  },
};
</script>

<style scoped>
.main {
  color: #5f5f5f;
  margin: 20px;
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
}

.title {
  font-size: 25px;
  font-weight: 600;
}

.content {
  font-size: 15px;
  margin: 30px 0;
}

.description {
  text-indent: 2em;
}

.display-section-description {
  /* 超出两行显示省略号 */
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
}

.load-details {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #88abda;
}

.bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.vote-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.user-table {
  width: 100%;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.progress {
  display: flex;
  justify-content: center;
  align-content: center;
}
</style>